﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>SQL格式化 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 SQL格式化" />
    <meta name="description" content="Script Services 美化SQL语句" />

</head>
<body>
<div id='LoadingMask' style='position:fixed;top:0;left:0;bottom:0;right:0;background-color:white;z-index:19999;background-image:url("/images/loading.svg");background-repeat:no-repeat;background-position:48% 45%'></div>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/netnrnav@1.1.1/src/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/netnrnav@1.1.1/src/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=ILaxEDuAKPcfx0Dw00WIDWl_jGo3BYpoTjyINR4ydjY" rel="stylesheet" />
        <script src="/js/global.js?v=pKcbh4RJesRNHWnZRek0eTm5akwKQWgf9Qa-pLuFFAs"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="美化SQL语句">
                                    <svg class="titleicon"><use xlink:href="#sql"></use></svg> SQL&#x683C;&#x5F0F;&#x5316;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="input-group-append">
                    <button class="btn btn-info" id="btnSqlFormatter" title="Shift+Alt+F 快捷格式化">格式化</button>
                </div>
                <div class="input-group-append">
                    <select class="custom-select nrSqlConfigLanguage">
                        <optgroup label="语言类型">
                            <option value="sql">SQL</option>
                            <!-- dialects -->
                            <option value="redshift">AWS Redshift</option>
                            <option value="db2">DB2</option>
                            <option value="mariadb">MariaDB</option>
                            <option value="mysql">MySQL</option>
                            <option value="n1ql">N1QL</option>
                            <option value="plsql">PL/SQL</option>
                            <option value="postgresql">PostgreSQL</option>
                            <option value="spark">Spark</option>
                            <option value="tsql">Transact-SQL</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group-append">
                    <select class="custom-select nrSqlConfigUpperCase">
                        <optgroup label="关键字">
                            <option value="1">大写</option>
                            <option value="0">不处理</option>
                        </optgroup>
                    </select>
                </div>

                <a target="_blank" class="btn btn-warning ml-3" href="https://sqlformat.darold.net/">pgFormatter</a>
                <div class="input-group-prepend pt-2 pl-3 text-muted">
                    自动保存，可拖拽文件打开
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-2">
            <div id="editor" class="border overflow-hidden position-relative">
                <i class="fa fa-arrows-alt fa-fw me-full-btn" title="Switch the full screen"></i>
            </div>
        </div>
    </div>
</div>

<script>
    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    AutoHeight();
</script>

<script src='https://cdn.jsdelivr.net/npm/sql-formatter@4.0.2/dist/sql-formatter.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>
                        


<script>
    var editor, dv = ss.lsStr('txt') || 'SELECT * FROM table1 表名',
        scLanguage = ss.lsStr('sql-config-language') || 'sql',
        scUpperCase = ss.lsStr('sql-config-uppercase') || "1";

    $('.nrSqlConfigLanguage').change(function () {
        ss.ls["sql-config-language"] = this.value;
        ss.lsSave();
    }).val(scLanguage);

    $('.nrSqlConfigUpperCase').change(function () {
        ss.ls["sql-config-uppercase"] = this.value;
        ss.lsSave();
    }).val(scUpperCase);

    require(['vs/editor/editor.main'], function () {
        var te = $("#editor");

        editor = monaco.editor.create(te[0], ss.meConfig({
            value: dv,
            language: 'sql'
        }));

        editor.onDidChangeModelContent(function (e) {
            clearTimeout(window.defer1);
            window.defer1 = setTimeout(function () {
                ss.ls.txt = editor.getValue();
                ss.lsSave();
            }, 1000 * 1)
        });

        //快捷键
        editor.addCommand(monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F, function () {
            $('#btnSqlFormatter')[0].click();
        })
        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, function () {
            $('#btnSqlFormatter')[0].click();
        })
    });

    $(window).resize(AutoHeight);

    $('#btnSqlFormatter').click(function () {
        var sf = sqlFormatter.format(editor.getValue(), {
            language: $('.nrSqlConfigLanguage').val(),
            uppercase: $('.nrSqlConfigUpperCase').val() == "1"
        });
        editor.setValue(sf);
    })

    //接收文件
    ss.receiveFiles(function (files) {
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            editor.setValue(e.target.result);
        };
        reader.readAsText(file);
    });
</script>
        </div>
</body>
</html>
